<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>海南热带雨林</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../layui/css/layui.css" rel="stylesheet">
</head>
<style>
    table {
        text-align: center;
    }

    .layui-table-cell {
        text-align: center !important;
    }

    .layui-layout-admin .layui-header, .layui-btn, .layui-bg-black, .layui-nav, .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #003078 !important;
    }

    .layui-layout-admin .layui-logo {
        width: 100%;
    }

    .layui-form-item {
        display: inline-block;
    }

    #query, #add {
        position: absolute;
        height: 37px;
        line-height: 37px;
        margin-left: 15px;
    }

    #add {
        margin-left: 95px;
    }

    .layui-header {
        height: 80px !important;
    }

    .layui-layout-admin .layui-side, .layui-layout-admin .layui-body {
        top: 80px !important;
    }

    .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover {
        background-color: #01aaed;
    }


</style>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <div class="layui-row">
            <div class="layui-col-xs12 layui-form">
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-prefix">
                            用户名
                        </div>
                        <input type="text" placeholder="请输入用户名" class="layui-input" value="海某化工">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-prefix">
                            生产线选择
                        </div>
                        <select>
                            <option value="综合变1#配线进线">进线-9</option>
                            <option value="综合变2#配线进线">综合变2#配线进线</option>
                            <option value="综合变3#配线进线">综合变3#配线进线</option>
                            <option value="综合变4#配线进线">综合变4#配线进线</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-prefix">
                            分析周期
                        </div>
                        <select>
                            <option value="5">5年</option>
                            <option value="化工">8年</option>
                            <option value="仪器仪表">10年</option>
                            <option value="电气机械">15年</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-prefix">
                            参考数据
                        </div>
                        <div class="layui-inline" id="ID-laydate-range">
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input"
                                       placeholder="开始日期" value="2019-07">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input"
                                       placeholder="结束日期" value="2019-09">
                            </div>
                            <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="edit" id="query">
                                <i class="layui-icon layui-icon-survey"
                                   style="font-size: 15px;margin-right:5px "></i>
                                开始评估</a>
                        </div>
                    </div>


                </div>

                <div class="layui-col-xs12 layui-form">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">串联型补偿设备</li>
                            <li>并联型补偿设备</li>
                            <li>串联型+并联型补偿设备</li>
                            <li>快切开关补偿设备</li>
                            <li>最优治理方案</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-row">
                                    <div class="layui-col-xs12 layui-form">

                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-split layui-input-prefix">
                                                    购置价格
                                                </div>
                                                <input type="text" placeholder="" class="layui-input" value="0.145">
                                                <div class="layui-input-split layui-input-suffix">
                                                    万元/kVA
                                                </div>
                                            </div>
                                        </div>


                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-split layui-input-prefix">
                                                    补偿能力
                                                </div>
                                                <input type="text" placeholder="" class="layui-input" value="1">
                                                <div class="layui-input-split layui-input-suffix">
                                                    p.u.
                                                </div>
                                            </div>
                                        </div>


                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-split layui-input-prefix">
                                                    年维护费
                                                </div>
                                                <input type="text" placeholder="" class="layui-input" value="0.001">
                                                <div class="layui-input-split layui-input-suffix">
                                                    万元/kVA
                                                </div>
                                            </div>
                                        </div>


                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-split layui-input-prefix">
                                                    响应时间
                                                </div>
                                                <input type="text" placeholder="" class="layui-input" value="1">
                                                <div class="layui-input-split layui-input-suffix">
                                                    ms
                                                </div>
                                            </div>
                                        </div>


                                        <div class="layui-form-item">
                                            <div class="layui-input-group">
                                                <div class="layui-input-split layui-input-prefix">
                                                    后备时间
                                                </div>
                                                <input type="text" placeholder="" class="layui-input" value="900">
                                                <div class="layui-input-split layui-input-suffix">
                                                    s
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    <div class="layui-col-xs4" style="margin-top: 80px">
                                        <table class="layui-hide"  id="demoTable">
                                        </table>
                                    </div>
                                    <div class="layui-col-xs8">
                                        <div id="container" style="height: 400px"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">内容-2</div>
                            <div class="layui-tab-item">内容-3</div>
                            <div class="layui-tab-item">内容-3</div>
                            <div class="layui-tab-item">
                                <img src="./imgs/best.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>


<script src="../../layui/layui.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'table', 'util', 'table'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        var table = layui.table;

        // 创建表格实例
        table.render({
            elem: '#demoTable',
            page: false,
            cols: [[
                {field:'name', title: '评估项'},
                {field:'value', title: '评估结论'},
            ]],
            "data": [
                {
                    "name": "治理容量（kW)",
                    "value": "1950"
                },
                {
                    "name": "机柜尺寸（mm/台）",
                    "value": "[1600*1000*2100]*5"
                },
                {
                    "name": "初期投资（万元）",
                    "value": "282.5"
                }, {
                    "name": "投资回收期（年）",
                    "value": "2"
                }, {
                    "name": "治理效果（万元/年）",
                    "value": "264.63"
                }
            ]
        });

    });

    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        xAxis: {
            name: '年份',
            min: 2024,
            max: 2029
        },
        yAxis: {
            name: '万元',
        },
        legend: {
            show: true
        },

        grid: {
            left: '5%',
            right: '5%'
        },
        color: ['red', 'blue', 'green'],
        series: [
            {
                name: '用户投资',
                data: [
                    [2024, 282.75],
                    [2025, 282.75],
                    [2025, 1.95],
                    [2026, 1.95],
                    [2027, 1.95],
                    [2028, 1.95],
                    [2029, 1.95]
                ],
                type: 'line'
            },
            {
                name: '治理效果',
                data: [
                    [2024, 264.63],
                    [2025, 264.63],
                    [2026, 264.63],
                    [2027, 264.63],
                    [2028, 264.63],
                    [2029, 264.63]
                ],
                type: 'line'
            },
            {
                name: '用户收益',
                data: [
                    [2024, -282.75],
                    [2025, -18.12],
                    [2026, 246.51],
                    [2027, 511.14],
                    [2028, 775.77],
                    [2029, 1040.4]
                ],
                type: 'line'
            }
        ]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>